<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-类的操作</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }

        .b2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

    <script>

        window.onload = function () {

            var box = document.getElementById("box");
            var btn01 = document.getElementById("btn01");

            btn01.onclick = function () {

                //修改box的class属性
                //box.className = "b2";

                //添加box的class属性
                //box.className += " b2";

                //调用addClass函数
                addClass(box, "b2");
            }

        }


        /*定义一个函数，用来向一个元素中添加指定的class属性值
        *    参数：
        *        1-obj,要添加class属性的元素
        *        2-cn,要添加class值
        */
        function addClass(obj, cn) {

            if (!hasClass(obj, cn)) {
                obj.className += " " + cn;
            }
        }


        /*定义一个函数，用来判断一个元素中是否含有指定的class属性值
        *     参数：
        *        1-obj,要添加class属性的元素
        *        2-cn,要添加class值
        *如果有返回true，没有返回false
        */
        function hasClass(obj, cn) {

            var reg = new RegExp("\\b" + cn + "\\b");

            return reg.test(obj.className);
        }


        /*定义一个函数，用来删除一个元素中的指定的class属性*/
        function removeClass(obj, cn) {

            var reg = new RegExp("\\b" + cn + "\\b");

            //删除class
            obj.className = obj.className.replace(reg, "");

        }


        /*定义一个函数，用来切换一个类
        *如果元素中有该类，则删除
        *如果没有该类，则添加
        */
        function toggleClass(obj, cn) {
            if (hasClass(obj, cn)) {
                removeClass(obj,cn);
            }else{
                addClass(obj,cn);
            }
        }

    </script>
</head>

<body>
    <button id="btn01">点击按钮以后修改box的样式</button>

    <br /><br />

    <div id="box" class="b1"></div>
</body>

</html>